<template>
  <div class="area-select">
    <el-col :span="6">
      <el-form-item prop="province">
        <el-select
            v-model="model.province"
            placeholder="请选择省"
            clearable
            style="width: 200px"
            @change="handleProvinceChange"
        >
          <el-option
              v-for="item in provinceList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item prop="city">
        <el-select
            v-model="model.city"
            placeholder="请选择市"
            clearable
            style="width: 200px"
            :disabled="!model.province"
            @change="handleCityChange"
        >
          <el-option
              v-for="item in cityList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item prop="area">
        <el-select
            v-model="model.area"
            placeholder="请选择区/县"
            clearable
            style="width: 200px"
            :disabled="!model.city"
            @change="handleAreaChange"
        >
          <el-option
              v-for="item in areaList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item prop="country">
        <el-select
            v-model="model.country"
            placeholder="请选择乡镇/街道"
            clearable
            style="width: 200px"
            :disabled="!model.area"
            @change="handleCountryChange"
        >
          <el-option
              v-for="item in streetList"
              :key="item.code"
              :label="item.name"
              :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
  </div>
</template>

<script setup>
import {onMounted} from 'vue'
import { areaSelect } from "@/composables/AreaSelect"

//定义组件属性
const props = defineProps({
  model: {
    type: Object,
    required: true
  }
})

//定义事件
const emit = defineEmits(['update:model'])

//使⽤areaSelect组合式函数
const {
  provinceList,
  cityList,
  areaList,
  streetList,
  initProvinceList,
  provinceChange,
  cityChange,
  areaChange
} = areaSelect()

//省份选择改变时
function handleProvinceChange(value) {
  console.log('省份选择改变:', value)
  //重置市、区、街道
  props.model.city = ''
  props.model.area = ''
  props.model.country = ''
  cityList.value = []
  areaList.value = []
  streetList.value = []
  
  if (value) {
    // 根据选中的省名找到对应的code
    const selectedProvince = provinceList.value.find(item => item.name === value)
    console.log('选中的省份:', selectedProvince)
    if (selectedProvince) {
      provinceChange(selectedProvince.code).then(() => {
        // 确保省份change后，cityList已被更新
        console.log('市级数据更新完成:', cityList.value)
      })
    }
  }
  emit('update:model', props.model)
}

//市选择改变时
function handleCityChange(value) {
  console.log('市选择改变:', value)
  //重置区、街道
  props.model.area = ''
  props.model.country = ''
  areaList.value = []
  streetList.value = []
  
  if (value) {
    // 根据选中的市名找到对应的code
    const selectedCity = cityList.value.find(item => item.name === value)
    console.log('选中的市:', selectedCity)
    if (selectedCity) {
      cityChange(selectedCity.code).then(() => {
        // 确保市级change后，areaList已被更新
        console.log('区级数据更新完成:', areaList.value)
      })
    }
  }
  emit('update:model', props.model)
}

//区 / 县选择改变时
function handleAreaChange(value) {
  console.log('区选择改变:', value)
  //重置街道
  props.model.country = ''
  streetList.value = []
  
  if (value) {
    // 根据选中的区/县名找到对应的code
    const selectedArea = areaList.value.find(item => item.name === value)
    console.log('选中的区:', selectedArea)
    if (selectedArea) {
      areaChange(selectedArea.code).then(() => {
        // 确保区级change后，streetList已被更新
        console.log('街道数据更新完成:', streetList.value)
      })
    }
  }
  emit('update:model', props.model)
}

//街道选择改变时
function handleCountryChange(value) {
  //可以在这⾥添加街道选择后的处理逻辑
  emit('update:model', props.model)
}

//初始化省份列表
onMounted(() => {
  initProvinceList()
})
</script>

<style scoped>
.area-select {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}

.area-select :deep(.el-form-item) {
  margin-bottom: 0;
}

.area-select :deep(.el-form-item__content) {
  flex-wrap: nowrap;
}

.area-select :deep(.el-select) {
  width: 100%;
}
</style>